在Day11 Visual Formatting Model 淺談視覺格式化模型探討到，Positioning scheme 中有 normal flow、float,、absolute positioning。讓我們知道更多些～
Normal Flow 是 CSS 中元素排布的預設方式，包括區塊級元素和行內元素。塊級元素依照垂直方向從上到下排列，而行內元素則依照水平方向從左到右排列。其包含區塊級元素和內聯元素。
可以由浮動元素、絕對定位元素、區塊級容器元素（如 inline-blocks、table-cells 和 table-captions，但不包括區塊級盒子） ，以及設定了overflow屬性為非visible的塊級盒子來創建。在區塊層級格式化上下文中，盒子按照垂直方向一個接一個地排列，它們之間的垂直間距由'margin'屬性決定。
由包含沒有區塊級盒子的區塊級容器盒子建立。在行內格式化上下文中，盒子按照水平方向一個接一個地排列，水平間距由水平的'margins'、'borders'和'padding'屬性來決定。行內元素可以以不同的方式在垂直方向對齊。
是一種 CSS 中的元素位置調整方式，它不會改變元素的大小，但可以將元素相對於其正常流位置進行水平或垂直移動。相對定位不會影響其後續元素的位置，可能會導致元素的重疊。
Float 用於控製文字和其他元素在頁面上的。透過將元素浮動到指定的方向（左或右），實現文字環繞圖片等效果。
浮動方向：float屬性通常可以設定為左浮動（float: left）或右浮動（float: right）。這決定了元素在其容器內是向左浮動還是向右浮動。
元素包裹：浮動元素會導致其容器的高度塌陷，容器會不考慮浮動元素的高度而縮小。為了防止這種情況，可以使用clear屬性來清除浮動，例如clear: both將阻止元素在左右兩側都浮動。
浮動元素的順序：浮動元素的排列順序通常會影響它們在頁面上的顯示順序。在 HTML 中，浮動元素越早出現在文件流程中，就越早浮動，因此要小心浮動順序。
浮動元素的寬度：浮動元素的寬度通常應該明確定義，以確保它們在容器內佔據正確的空間。如果不設定寬度，浮動元素可能會變得不可控，導致佈局問題。
清除浮動：要確保容器正確包裹浮動元素，通常需要在容器內的最後一個浮動元素之後添加具有clear: both或其他清除浮動屬性的元素。這可以防止容器高度塌陷。
Absolute Positioning 是從 Normal Flow 中完全脫離，並相對於其最近的已定位祖先元素進行定位。這種方式可以用來創建精確的佈局，但需要小心處理，以確保元素的位置不會與其他元素重疊或導致不必要的佈局混亂。
定位基準點：絕對定位的元素是相對於最近的已定位父元素進行定位的。要使絕對定位生效，通常需要為元素的已定位父元素（通常是包裹該元素的容器）設置position: relative;，以便該容器成為定位的基準點。
位置屬性：絕對定位的元素可以透過設定top、right、bottom、和left屬性來指定其在基準點上的位置。這些屬性允許開發者以像素、百分比等方式精確控制元素的位置。
層疊順序：不佔據文件流程中的位置，因此可能與其他元素重疊。開發者可以使用z-index屬性來指定元素的層疊順序，以決定哪個元素位於其他元素的上方。
相對於視口：除了相對於已定位祖先元素進行定位外，絕對定位的元素還可以相對於視口進行定位。這可以透過將已定位祖先元素設為position: fixed;或position: absolute;並將其置於視口的邊緣來實現。
適用場景：絕對定位通常用於創建具有互動性的元素，如懸浮選單、模態框、提示框等。它還可用於建立具有複雜佈局要求的元素，如報價單、圖表等。
Normal Flow 是預設的文件流，提供了網頁的基本結構；Float 允許元素浮動到容器的邊緣，用於創建多欄佈局等情況；Absolute Positioning 則提供了精確的元素定位控制。
Understanding CSS Layout And The Block Formatting Context
CSS Layout - The Display Property
MDN CSS Float
CSS-Tricks Understanding CSS Floats
CSS Floats: The How and Why
MDN CSS Positioning
iThome鐵人賽
看影片追技術